<template>
  <div class="page-wrapper">
    <div style="text-align: left; margin-bottom: 14px;">
      <back-btn @click="goBack"></back-btn>
    </div>
    <c-card title="设置节点">
      <el-button slot="func" size="small" @click="showAddNodeDlg">添加节点</el-button>
      <div style="text-align: left">
        <el-table stripe :data="nodes">
          <el-table-column prop="nodeType" label="节点类型">
            <template v-slot="{row}">{{ getNodeType(row.nodeType) }}</template>
          </el-table-column>
          <el-table-column prop="nodeName" label="节点名称"></el-table-column>
          <el-table-column prop="nodeOrder" label="序号"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template v-slot="{row}">{{ row.status === 1 ? '可用' : '不可用' }}</template>
          </el-table-column>
          <el-table-column prop="status" label="操作">
            <template v-slot="{row, $index}">
              <el-button size="small" type="text" @click="showEditNodeDlg(row, $index)">修改</el-button>
              <el-button size="small" type="text" @click="deleteNode(row.pkid)">删除</el-button>
              <el-button size="small" type="text" @click="showEditUserDlg(row)">设置用户</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </c-card>
    <c-dlg title="设置用户" :visible.sync="editUserDlg">
      <el-transfer
        v-model="selectUser"
        :data="users"
        :titles="['所有用户', '已选择']"
        :props="{key: 'pkid',label: 'username'}"
      ></el-transfer>
      <div slot="footer">
        <el-button size="small" @click="submitNodeUsers">确定</el-button>
        <el-button size="small" @click="editUserDlg = false">取消</el-button>
      </div>
    </c-dlg>
    <c-dlg :title="node.isEdit ? '编辑节点' : '添加节点'" :visible.sync="nodeDlg">
      <el-form :model="node" label-width="60px" class="progress-form" label-position="top">
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="节点名称" prop="nodeName">
              <el-input v-model="node.nodeName" size="small"></el-input>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="节点类型" prop="nodeType">
              <el-select v-model="node.nodeType" size="small">
                <el-option v-for="t in nodeTypes" :key="t.id" :label="t.value" :value="t.id"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="form-row">
          <div class="row-item">
            <el-form-item label="节点序号" prop="nodeOrder">
              <el-input v-model="node.nodeOrder" size="small"></el-input>
            </el-form-item>
          </div>
          <span class="spliter"></span>
          <div class="row-item">
            <el-form-item label="节点状态" prop="satus">
              <el-radio-group v-model="node.status">
                <el-radio :label="1">可用</el-radio>
                <el-radio :label="0">不可用</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="saveNode">确定</el-button>
        <el-button size="small" @click="nodeDlg = false">取消</el-button>
      </div>
    </c-dlg>
  </div>
</template>

<script>
const nodeTypes = ["开始节点", "结束节点", "中间节点"];
import BackBtn from "@/components/BackBtn";
import CCard from "@/components/CCard";
import CDlg from "@/components/CDlg";
import { cloneDeep } from "lodash";
export default {
  name: "ProcessNode",
  components: {
    BackBtn,
    CCard,
    CDlg
  },
  data() {
    return {
      nodeDlg: false,
      editUserDlg: false,
      loading: false,
      nodes: [],
      node: {},
      curNodeId: null,
      nodeTypes: [
        { id: 1, value: "启动" },
        { id: 2, value: "结束" },
        { id: 3, value: "中间" }
      ],
      users: [],
      selectUser: [],
      userSearchText: ""
    };
  },
  created() {
    this.id = parseInt(this.$route.params.id) || null;
    this._getNodes();
  },
  methods: {
    goBack() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.back();
    },
    // 获取流程节点
    _getNodes() {
      this.loading = true;
      return this.$axios
        .get("plat/work/queryNode", { params: { processDefineId: this.id } })
        .then(res => {
          if (res.code === 1) {
            this.nodes = res.data;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    // getUsers(name) {
    //   // todo get node's users api
    //   // return this.users.filter()
    // },
    getNodesUser(id) {
      const params = {
        pkid: id
      };
      return this.$axios
        .get("plat/work/nodeUser", { params })
        .then(res => {
          if (res.code === 1) {
            this.users = [...res.data.listUser, ...res.data.listNotUser];
            this.selectUser = res.data.listUser.map(e => e.pkid);
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    },
    getNodeType(type) {
      return nodeTypes[type - 1];
    },
    showEditUserDlg(node) {
      this.getNodesUser(node.pkid);
      this.curNode = node;
      this.editUserDlg = true;
      // this.getUsers();
    },
    showAddNodeDlg() {
      if (this.node.pkid) {
        this.node = {
          processDefineId: this.id
        };
      } else {
        this.node.processDefineId = this.id;
      }
      this.nodeDlg = true;
    },
    showEditNodeDlg(node, index) {
      this.index = index;
      if (node.pkid !== this.curNodeId) {
        this.curNodeId = node.pkid;
        this.node = cloneDeep(node);
      }
      this.nodeDlg = true;
    },
    saveNode() {
      // todo save node api
      return this.$axios.post("plat/work/editNode", this.node).then(res => {
        if (res.code === 1) {
          if (this.node.pkid) {
            // edit
            this.nodes.splice(this.index, 1, res.data);
          } else {
            // add
            this.nodes.push(res.data);
          }
          this.nodeDlg = false;
        }
      });
    },
    deleteNode(id) {
      this.$confirm("此操作不可逆, 是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return this.$axios
          .get("plat/work/defnode/delete?pkid=" + id)
          .then(res => {
            if (res.code === 1) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.nodes = this.nodes.filter(n => n.pkid !== id);
            } else {
              throw res.msg;
            }
          })
          .catch(e => this.$message.error(e));
      });
    },
    submitNodeUsers() {
      const post = {
        nodeId: this.curNode.pkid,
        userIds: this.selectUser.join(",")
      };
      return this.$axios
        .post("plat/work/nodeGiveUser", post)
        .then(res => {
          if (res.code === 1) {
            this.$message.success("设置成功");
            this.editUserDlg = false;
          } else {
            throw res.msg;
          }
        })
        .catch(e => this.$message.error(e));
    }
  }
};
</script>

<style lang="scss" scoped>
.el-transfer {
  /deep/ .el-input {
    width: auto;
  }
  /deep/ .el-transfer-panel__item {
    display: block;
    text-align: left;
    .el-checkbox__input {
      left: 8px;
    }
  }
}
</style>
